<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>${product.pName}</title>
    <!-- JqueryUI -->
    <link rel="stylesheet" type="text/css" href="${path}/css/jquery-ui.css">
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="${path}/css/bootstrap.min.css">
    <!-- Awesome font icons -->
    <link rel="stylesheet" type="text/css" href="${path}/css/font-awesome.min.css" media="screen">
    <!-- Owlcoursel -->
    <link rel="stylesheet" type="text/css" href="${path}/css/owl-coursel/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="${path}/css/owl-coursel/owl.transitions.css">
    <!-- Magnific-popup -->
    <link rel="stylesheet" type="text/css" href="${path}/css/magnific-popup/magnific-popup.css">
    <!-- Style -->
    <link rel="stylesheet" type="text/css" href="${path}/css/style.css" media="screen">
    <!-- Fw -->
    <link rel="stylesheet" type="text/css" href="${path}/css/fw.css" media="screen">

    <style type="text/css">
        #carbg{
            width: 600px;
            height: 600px;
        }
        #carbg img{
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body class="bg-m">


<div class="preloader">
    <i class="fa fa-spinner"></i>
</div>
<!--引入导航begin-->
<%@ include file="common/header.jsp" %>
<!--引入导航end-->

<!-- Product -->
<section class="m-t-30">
    <div class="container">
        <div class="row">
            <!-- Product image gallery -->
            <div class="col-sm-6 col-md-7" id="carbg">

                <div id="myCarousel" class="carousel slide">
                    <!-- 轮播（Carousel）指标 -->
                    <ol class="carousel-indicators">
                        <c:forEach items="${images}" var="image" varStatus="vs">
                            <c:if test="${image.mark==1}">
                                <li data-target="#myCarousel" data-slide-to="${vs.index}"></li>
                            </c:if>
                        </c:forEach>
                    </ol>
                    <!-- 轮播（Carousel）项目 -->
                    <div class="carousel-inner">
                        <c:forEach items="${images}" var="image">
                            <c:if test="${image.mark==1}">
                                <div class="item">
                                    <img src="${path}/images/product/${image.imgUrl}" alt="First slide">
                                </div>
                            </c:if>
                        </c:forEach>
                    </div>
                    <!-- 轮播（Carousel）导航 -->
                    <a class="carousel-control left" href="#myCarousel"
                       data-slide="prev">&lsaquo;
                    </a>
                    <a class="carousel-control right" href="#myCarousel"
                       data-slide="next">&rsaquo;
                    </a>
                </div>


                <%--<ul class="thumbnails p-0">--%>
                    <%--<li>--%>
                        <%--<a class="thumbnail img-large image-zoom" href="${path}/images/product/${images[0].imgUrl}"--%>
                           <%--title="iPhone">--%>
                            <%--<img src="${path}/images/product/${images[0].imgUrl}" alt="iPhone">--%>
                        <%--</a>--%>
                    <%--</li>--%>
                    <%--<c:forEach items="${images}" var="image">--%>
                        <%--<c:if test="${image.mark==1}">--%>
                            <%--<li class="image-additional">--%>
                                <%--<a class="thumbnail image-zoom" href="${path}/images/product/${image.imgUrl}"--%>
                                   <%--title="iPhone">--%>
                                    <%--<img src="${path}/images/product/${image.imgUrl}" title="iPhone" alt="iPhone">--%>
                                <%--</a>--%>
                            <%--</li>--%>
                        <%--</c:if>--%>

                    <%--</c:forEach>--%>

                <%--</ul>--%>
            </div>
            <!-- Product decr -->
            <div class="col-sm-6 col-md-5">
                <div class="product-pare m-t-xs-60">
                    <h1>${product.pName}</h1>
                    <ul class="list-unstyled m-b-20">
                        <li><span>名称:</span>${product.pName}</li>
                        <li><span>规格:</span>${product.standard}</li>
                        <li><span>产地:</span>${product.origin}</li>
                        <li><span>类别:</span>${product.category.categoryName}</li>
                        <li><span>参与活动:</span>${product.recState}</li>
                        <li><span>单价:</span>${product.price}元</li>
                        <li><span>库存:</span>${product.stock}件</li>

                    </ul>
                    <p class="product-price" id="pricetotal">￥${product.price}</p>
                    <div class="quantily-wrap">
                        <label class="control-label" for="input-quantity"></label>
                        <input type="number" value="1" min="1" size="2" id="input-quantity"
                               class="form-control form-item">
                    </div>
                    <button type="button" class="btn ht-btn bg-3 m-t-0" onclick="addtocart()">添加到购物车</button>
                </div>
            </div>
        </div><!-- End row -->
        <!-- Tabs -->
        <!--折叠部分 begin-->
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion"
                       href="#collapseTwo"> 展开详细信息 </a>
                </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
                <div class="panel-body">
                    <!--tab选项卡 begin-->
                    <ul id="myTab" class="nav nav-tabs">
                        <li class="active"><a href="#home" data-toggle="tab">
                            商品详情 </a></li>
                        <li><a href="#ios" data-toggle="tab"> <span
                                class="badge pull-right">${comments.size()}</span>累计评价
                        </a></li>
                    </ul>
                    <div id="myTabContent" class="tab-content">
                        <div class="tab-pane fade in active" id="home">
                            <p>
                                <em>产品参数：</em>
                            </p>
                            <div class="row">
                                <div class="col-sm-12 col-md-6">
                                    <ul class="nav navbar-collapse" style="line-height: 3;">
                                        <li class="text-info"><span>名称:</span>${product.pName}</li>
                                        <li class="text-info"><span>规格:</span>${product.standard}</li>
                                        <li class="text-info"><span>产地:</span>${product.origin}</li>
                                        <li class="text-info"><span>类别:</span>${product.category.categoryName}</li>
                                        <c:forEach items="${intros}" var="intro">
                                            <li class="text-info"><span>${intro.key}:</span>${intro.value}</li>
                                        </c:forEach>

                                        <c:forEach items="${images}" var="image">
                                            <c:if test="${image.mark==2}">
                                                <li class="img-large">
                                                        <img src="${path}/images/product/${image.imgUrl}">
                                                </li>
                                            </c:if>

                                        </c:forEach>
                                    </ul>
                                </div>
                                <span class="visible-sm visible-xs"></span>
                                <hr>

                            </div>
                            </p>
                        </div>
                        <div class="tab-pane fade" id="ios">
                            <p>
                            <ul class="list-group" id="comments-outer">
                                <c:forEach items="${page.list}" var="comment">
                                    <li class="list-group-item">

                                        <table>
                                            <tr>
                                                <td width="80px">${comment.username}</td>
                                                <td>
                                                    <table>
                                                        <tr>
                                                            <td>评分：</td>
                                                            <td>
                                                                <c:if test="${comment.rank==1}">
                                                                    <img src="${path}/images/star.png"
                                                                         style="width: 20px;height: 20px;"/>
                                                                </c:if>
                                                                <c:if test="${comment.rank==2}">
                                                                    <img src="${path}/images/star.png "
                                                                         style="width: 20px;height: 20px;"/>
                                                                    <img src="${path}/images/star.png"
                                                                         style="width: 20px;height: 20px;"/>
                                                                </c:if>
                                                                <c:if test="${comment.rank==3}">
                                                                    <img src="${path}/images/star.png "
                                                                         style="width: 20px;height: 20px;"/>
                                                                    <img src="${path}/images/star.png"
                                                                         style="width: 20px;height: 20px;"/>
                                                                    <img src="${path}/images/star.png"
                                                                         style="width: 20px;height: 20px;"/>
                                                                </c:if>
                                                                <c:if test="${comment.rank==4}">
                                                                    <img src="${path}/images/star.png "
                                                                         style="width: 20px;height: 20px;"/>
                                                                    <img src="${path}/images/star.png"
                                                                         style="width: 20px;height: 20px;"/>
                                                                    <img src="${path}/images/star.png "
                                                                         style="width: 20px;height: 20px;"/>
                                                                    <img src="${path}/images/star.png"
                                                                         style="width: 20px;height: 20px;"/>
                                                                </c:if>
                                                                <c:if test="${comment.rank==5}">
                                                                    <img src="${path}/images/star.png "
                                                                         style="width: 20px;height: 20px;"/>
                                                                    <img src="${path}/images/star.png"
                                                                         style="width: 20px;height: 20px;"/>
                                                                    <img src="${path}/images/star.png"
                                                                         style="width: 20px;height: 20px;"/>
                                                                    <img src="${path}/images/star.png"
                                                                         style="width: 20px;height: 20px;"/>
                                                                    <img src="${path}/images/star.png"
                                                                         style="width: 20px;height: 20px;"/>
                                                                </c:if>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td>内容：</td>
                                                            <td>${comment.content}</td>
                                                        </tr>
                                                        <c:if test="${!empty comment.images}">
                                                            <tr>
                                                                <td>晒图：</td>
                                                                <td>
                                                                    <ul class="thumbnails p-0">
                                                                        <c:forEach items="${comment.images}" var="img">
                                                                            <li class="image-additional">
                                                                                <a href="javascript:imgShow('${img.imgUrl}')">
                                                                                    <img src="${path}/images/comments/${img.imgUrl}">
                                                                                </a>
                                                                            </li>
                                                                        </c:forEach>
                                                                    </ul>
                                                                </td>
                                                            </tr>
                                                        </c:if>
                                                        <tr>
                                                            <td>时间：</td>
                                                            <td><fmt:formatDate value="${comment.commentDate}" type="both"></fmt:formatDate></td>
                                                        </tr>
                                                    </table>
                                                </td>
                                            </tr>
                                        </table>

                                    </li>
                                </c:forEach>
                            </ul>
                            </p>
                            <p>
                            <ul class="pager">
                                <li><a href="javascript:switchPage(false)" title="提示" data-placement="left"
                                       data-toggle="popover" data-content="已到达第一页" id="prepage">&larr;上一页</a>
                                    <a href="javascript:switchPage(true)" title="提示" data-placement="right"
                                       data-toggle="popover" data-content="已到达最后一页" id="nextpage">下一页 &rarr;</a>
                                </li>
                            </ul>
                            </p>
                        </div>
                    </div>
                    <!--tab选项卡 end-->
                </div>
            </div>
        </div>
        <!--折叠部分end-->
    </div>
    </div>
    </div>
</section>

<!-- 模态框（Modal） -->
<div class="modal fade" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
        </button>
        <img src="#">
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<%@ include file="common/recent.jsp"%>
<!--引入footer Begin-->
<%@ include file="common/footer.jsp" %>
<!--引入footer  End-->

<!-- jQuery -->
<script src="${path}/js/jquery/jquery-2.2.4.min.js"></script>
<!-- JqueryUI -->
<script src="${path}/js/jquery/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${path}/js/bootstrap/bootstrap.min.js"></script>
<!-- Owl-coursel -->
<script src="${path}/js/owl-coursel/owl.carousel.js"></script>
<!-- Magnific-popup -->
<script src="${path}/js/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="${path}/js/script.js"></script>

<script src="${path}/js/product.js"></script>

<script type="text/javascript">
    $(function () {
        $(".carousel-indicators>li:first").addClass("active");
        $(".carousel-inner>div:first").addClass("active");
    })
    $(function () {
        $("#input-quantity").blur(function () {
            $("#pricetotal").html("￥" + $('#input-quantity').val() *${product.price});
        })

        $("#input-quantity").change(function () {
            $("#pricetotal").html("￥" + ${product.price} * $('#input-quantity').val());
        })
    })

    function addtocart() {
        window.location.href="${path}/cart/addtocart?pid=${product.pid}&num="+$("#input-quantity").val();

    }


    function imgShow(url) {
        $("#imgModal img").attr('src',"${path}/images/comments/"+url);
        $("#imgModal").modal("show");
    }
</script>
<script type="text/javascript">



    var pageNow=1;
    function switchPage(flag) {

        $("[data-toggle='popover']").popover('destroy');

        var c=${page.pageCount};
        if (flag) {
            if (pageNow < c) {
                pageNow++;
            } else {
                pageNow = c;
                $('#nextpage').popover('show');

                return;
            }
        }else{
            if (pageNow > 1) {
                pageNow--;
            } else {
                pageNow = 1;
                $('#prepage').popover('show');
                return;
            }
        }
        $.get("${path}/product/comments",{"id":${product.pid},"pageNow":pageNow},function (result) {

            var str="";
            for(var i=0;i<result.list.length;i++){

                str+="<li class='list-group-item'><table><tr><td width='80px'>";
                str+=result.list[i].username;
                str+="</td><td><table><tr><td>评分：</td><td>";
                for(var j=0;j<result.list[i].rank;j++){
                    str+="<img src='${path}/images/star.png' style='width: 20px;height: 20px;'/>";
                }
                str+="</td></tr><tr><td>内容：</td><td>";
                str+=result.list[i].content;
                str+="</td></tr>";

                if (result.list[i].images!=null&&result.list[i].images.length>0){
                    str+="<tr><td>晒图：</td><td><ul class='thumbnails p-0'>";

                    for(var k=0;k<result.list[i].images.length;k++){
                        str+="<li class='image-additional'><a class='thumbnail image-zoom' href='${path}/images/comments/";
                        str+=result.list[i].images[k].imgUrl;
                        str+="' title='iPhone'><img src='${path}/images/comments/";
                        str+=result.list[i].images[k].imgUrl;
                        str+="' title='iPhone' alt='iPhone'></a></li>";
                    }
                    str+="</ul></td></tr>";
                }

                str+="<tr><td>时间：</td><td>";
                str+=result.list[i].commentDate;
                str+="</td></tr></table></td></tr></table></li>";
            }

            $("#comments-outer").html(str);
        }
        );

    }
</script>

</body>
</html>